<template>
  <div>
  <Row>
    <Row class="search-info-style">
      <Col span="6">
        <span style="text-al">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
        <Input style="width: 70%;" v-model="searchInfo.applyname" />
      </Col>
      <Col span="6">
        <span>身份证号：</span>
        <Input style="width: 70%;" v-model="searchInfo.cardno" />
      </Col>
      <Col span="6">
        <span>申请时间：</span>
        <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" placement="bottom-end"
                    style="width: 70%" v-model="searchInfo.applytime"></DatePicker>
      </Col>
      <Button class="new-btn-sty" @click="searchData()" style="float:right">
        <Icon type="ios-clock-outline" /> 刷新
      </Button>
      <Button class="new-btn-sty" @click="searchData()" style="float:right">
        <Icon type="ios-search" /> 搜索
      </Button>
    </Row>
    <Table border :columns="columns1" :data="data"></Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <div style="float: right;margin-top: 10px">
      <Page :total="pageData.totalRecord" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
    </div>
  </Row>
  </div>
</template>

<script>
import { date2str, userinfo, createuser, getGllrruxxList, eventorderlist } from '@/api/eventlist'

export default {
  name: 'index.vue',
  data () {
    return {
      loadData: true,
      data: [],
      columns1: [
        { title: '序号', type: 'index', key: 'index', width: 100, align: 'center' },
        { title: '姓名', key: 'name', width: 100 },
        { title: '性别', key: 'sex', width: 80 },
        { title: '出生日期', key: 'birthday', width: 100 },
        { title: '身份证号', key: 'cardno', width: 160 },
        { title: '手机号', key: 'mobile', width: 140 },
        { title: '创建时间', key: 'create_time', width: 160 },
        { title: '地址', key: 'address', width: 240 },
        { title: '社区编码', key: 'shequ_code', width: 200 },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 100,
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px', backgroundColor: '#19be6b', borderColor: '#19be6b' },
                on: {
                  click: () => {
                    // this.nonagenarianShow = true
                    this.getUserInfo(params.row)
                  }
                }
              }, '办理')
            )
            temp.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px', backgroundColor: '#235CA7', borderColor: '#235CA7' },
                on: {
                  click: () => {
                    this.workbenchList(params.row)
                  }
                }
              }, '办理记录')
            )
            return h('div', temp)
          }
        }
      ],
      pageData: {
        totalRecord: 0,
        pageSize: 10,
        pageNo: 1
      },
      searchInfo: {}
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getApiData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getApiData()
    },
    init (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      getGllrruxxList(param).then(res => {
        if (res.data.data) {
          this.data = res.data.data.results
          // this.data = [{ name: '测试', cardno: '2109000000', sex: '女', birthday: '1992-09-01', mobile: '123123132', create_time: '2021-02-02 16:22:12', address: '测试地址', remarks: '测试而已' }]
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取事项办理列表失败', desc: res.data.errmsg })
        }
      })
    },
    // 切换tab页和搜索，刷新按钮
    searchData () {
      let params = {
        name: this.searchInfo.applyname,
        cardno: this.searchInfo.cardno
      }
      if (this.searchInfo.applytime[0]) params.start_time = date2str(this.searchInfo.applytime[0])
      if (this.searchInfo.applytime[1]) params.end_time = date2str(this.searchInfo.applytime[1])
      this.searchInfo.currentPageNo = 1
      this.init(params)
    },
    getUserInfo (params) { // 办理人信息获取
      userinfo(params.cardno).then(res => {
        if (res.data.errcode === 0) {
          this.$router.push({
            name: 'handinformation',
            params: {
              itemid: '11210101000000MZJD5212000474000',
              cardno: params.cardno,
              operation: '1'
            }
          })
        } else {
          params.card_type = '1'
          createuser(params).then(res => {
            if (res.data.errcode === 0) {
              this.$router.push({
                name: 'handinformation',
                params: {
                  itemid: '11210101000000MZJD5212000474000',
                  cardno: params.cardno,
                  operation: '1'
                }
              })
            } else {
              this.$Notice.error({ title: '个人信息创建失败', desc: res.data.errmsg })
            }
          })
        }
      })
    },
    workbenchList (params) {
      let param = {
        cardno: params.cardno
      }
      eventorderlist(param).then(res => {
        this.data2 = res.data.data.results
        if (res.data.data.results.length === 0) {
          this.$router.push({
            name: 'handinformation',
            params: {
              itemid: '11210101000000MZJD5212000474000',
              cardno: params.cardno,
              operation: '1'
            }
          })
        } else {
          this.$router.push({
            name: 'workbench',
            params: {
              cardno: params.cardno,
              operation: '1'
            }
          })
        }
      })
    }
  },
  mounted () {
    this.searchInfo.currentPageNo = this.$route.params.pageNo || 1
    this.init({})
  }
}
</script>

<style scoped>
  .search-info-style {
    margin: 10px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>
